<template>
  <el-row class="regist-container">
    <el-col :lg="6" :sm="4" class="left"></el-col>
    <el-col :lg="12" :sm="16" class="center">
      <div class="regist">
        <img style="width: 180px; height: 180px;" src="../../../assets/img/logo.png" alt="图片加载失败" />
        <div class="regist-head-text">列车订票系统 - 注册
        </div>
        <el-divider class="margin=20px"><i class="el-icon-ice-cream-square"></i></el-divider>
        <el-form label-width="auto" class="regist-form" :model="form" status-icon :rules="rules" ref="form">
          <el-form-item label="手机号:" class="regist-item" prop="userAccount">
            <el-input v-model="form.userAccount" class="regist-form-iput" autocomplete="off">
              <template slot="prepend">(+86)</template></el-input>
          </el-form-item>

          <el-form-item label="密码:" class="regist-item" prop="userPassword">
            <el-input v-model="form.userPassword" class="regist-form-iput" type="password" show-password
              autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="确认密码:" class="regist-item" prop="checkPassword">
            <el-input v-model="form.checkPassword" class="regist-form-iput" type="password" show-password
              autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="姓名:" class="regist-item" prop="userName">
            <el-input v-model="form.userName" class="regist-form-iput" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="邮箱:" class="regist-item" prop="userEmail">
            <el-input v-model="form.userEmail" class="regist-form-iput" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="regist-item">
            <el-checkbox v-model="agree">我已同意"列车订票系统"用户注册协议</el-checkbox>
          </el-form-item>

          <div class="regist-item-footer">
            <el-button @click="setRegist" class="regist-form-button" type="primary" :loading="loading">注 册</el-button>
            <el-link type="info" href="/#/login" style=" font-weight: bolder; font-size: 15px; color: #374151;"
              :underline="false">
              有账号去登录
              <i style="font-weight: bolder;font-size: 15px" class="el-icon-right"></i>
            </el-link>
          </div>
        </el-form>
      </div>
    </el-col>
    <el-col :lg="6" :sm="4" class="right"></el-col>
  </el-row>
</template>


<script scope>
import { toast } from '../../../composables/util';

export default {
  name: 'Regist',
  data() {
    // 自定义表单校验
    var validatePass = (rule, value, callback) => {
      if (value !== this.form.userPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      // 按钮预加载
      loading: false,
      // 是否签订协议
      agree: false,
      // 表单数据
      form: {
        userAccount: '15872079619',
        userPassword: '12345678',
        checkPassword: '12345678',
        userName: 'Jack',
        userEmail: 'jack@163.com',
      },
      // 校验规则
      rules: {
        userAccount: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 11, max: 11, message: '账号应为11位', trigger: ['blur', 'change'] }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '密码应为8-15位', trigger: ['blur', 'change'] }
        ],
        checkPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: ['blur', 'change'] }
        ],
        userName: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 0, max: 10, message: '名字不超过10位', trigger: ['blur', 'change'] }
        ],
        userEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    postRegist() {
      const RegistData = {
        userAccount: this.form.userAccount,
        userPassword: this.form.userPassword,
        userName: this.form.userName,
        userEmail: this.form.userEmail
      }

      // console.log(RegistData);
      this.request.post("/user/registUser", RegistData).then(
        response => {
          if (response.data.code === 1) {
            toast("注册成功", this)
            this.$router.push({ name: "login" })
          } else {
            toast("注册失败", this, "error")
          }
        },
        error => {
          console.log(error.message)
        }
      )
        .finally(() => {
          this.loading = false
        })
    },
    setRegist() {
      if (this.agree === false) {
        this.$message({
          message: '请勾选 我已同意"列车订票系统"用户注册协议!',
          type: 'warning'
        });
        return
      }
      this.loading = true
      setTimeout(() =>
        this.postRegist()
        , 1000);
    }
  }
}
</script>

<style scoped>
.regist {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.regist-container .left,
.regist-container .right {
  display: flex;
  min-height: 100vh;
  background-color: #3b82f6;
}

.regist-container .center {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.regist-head-text {
  font-weight: bold;
  font-size: 20px;
}

.regist-form {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
}

.regist-item {
  margin: 10px;
  font-weight: bold;
}

.regist-form-iput {
  width: 250px;
}

.regist-form-button {
  margin-right: 20px;
  width: 100px;
}

.regist-item-footer {
  margin-left: 145px;
}
</style>
